<template>
  <div class="dashboard-bg">
    <el-container class="dashboard-container">
      <!-- 顶部导航栏 -->
      <el-header class="dashboard-header">
        <div class="logo-area">
          <el-avatar size="small" src="" style="background:#e0e7ff;color:#7e57c2;">PO</el-avatar>
          <span class="search-bar">
            <el-input placeholder="请输入文本" size="small" prefix-icon="el-icon-search" />
          </span>
        </div>
        <div class="nav-area">
          <el-menu mode="horizontal" :default-active="topActive" class="el-menu-demo" background-color="transparent" text-color="#333" active-text-color="#7e57c2">
            <el-menu-item index="1" @click="goTo('/')">首页</el-menu-item>
            <el-menu-item index="2" @click="goTo('/data')">数据仓库</el-menu-item>
            <el-menu-item index="3" @click="goTo('/model')">模型库</el-menu-item>
            <el-menu-item index="4" @click="goTo('/community')">社区</el-menu-item>
            <el-menu-item index="5" @click="goTo('/project')">我的项目</el-menu-item>
          </el-menu>
          <el-avatar size="small" style="margin-left:16px;background:#7e57c2;">PO</el-avatar>
        </div>
      </el-header>
      <el-container>
        <!-- 侧边栏 -->
        <el-aside width="180px" class="dashboard-aside">
          <el-menu :default-active="sideActive" class="el-menu-vertical-demo" background-color="transparent" text-color="#333" active-text-color="#7e57c2">
            <el-menu-item index="1" @click="goTo('/')">我的项目</el-menu-item>
            <el-menu-item index="2" @click="goTo('/sample')">我的样本</el-menu-item>
            <el-menu-item index="3" @click="goTo('/model')">我的模型</el-menu-item>
            <el-menu-item index="4" @click="goTo('/data')">我的数据</el-menu-item>
          </el-menu>
        </el-aside>
        <!-- 主内容区 -->
        <el-main class="dashboard-main">
          <div class="main-header">
            <el-avatar size="large" style="background:#e0e7ff;color:#7e57c2;">PO</el-avatar>
            <span class="username">用户名</span>
            <el-input class="main-search" placeholder="请输入文本" size="small" prefix-icon="el-icon-search" />
            <el-button type="primary" @click="goToCreate">新建项目</el-button>
          </div>
          

          <el-card class="list-card">
            <div v-for="i in 6" :key="i" class="list-item"></div>
            <div class="pagination-area">
              <el-pagination
                background
                layout="prev, pager, next"
                :total="50"
                :page-size="6"
                :current-page="3"
              />
            </div>
          </el-card>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router'
import { ref } from 'vue'
const router = useRouter()
const topActive = ref('1')
const sideActive = ref('1')
function goTo(path) {
  router.push(path)
}
function goToCreate() {
  router.push('/create')
}
</script>

<style scoped>
.dashboard-bg {
  min-height: 100vh;
  background: linear-gradient(120deg, #e0e7ff 0%, #c3aed6 100%);
  padding: 0;
}
.dashboard-container {
  min-height: 100vh;
  box-shadow: 0 8px 32px 0 rgba(126, 87, 194, 0.10), 0 2px 8px 0 rgba(66, 133, 244, 0.08);
  border-radius: 12px;
  overflow: hidden;
  margin: 0 auto;
  max-width: 1200px;
  background: #fff;
}
.dashboard-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 64px;
  background: #f8f9fa;
  border-bottom: 1px solid #e0e7ff;
  padding: 0 32px;
}
.logo-area {
  display: flex;
  align-items: center;
}
.search-bar {
  margin-left: 16px;
  width: 220px;
}
.nav-area {
  display: flex;
  align-items: center;
}
.dashboard-aside {
  background: #f5f6fa;
  border-right: 1px solid #e0e7ff;
  padding-top: 24px;
}
.dashboard-main {
  padding: 32px 32px 0 32px;
  background: #f8f9fa;
  min-height: 600px;
}
.main-header {
  display: flex;
  align-items: center;
  margin-bottom: 24px;
}
.username {
  font-size: 22px;
  font-weight: 600;
  margin: 0 24px 0 16px;
  color: #7e57c2;
}
.main-search {
  width: 220px;
  margin-right: 24px;
}


.create-btn {
  margin-left: auto;
  background: #7e57c2;
  border: none;
}
.list-card {
  margin-top: 0;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 24px 0 rgba(126, 87, 194, 0.08);
  padding: 32px 24px 24px 24px;
  min-height: 350px;
}
.list-item {
  height: 36px;
  background: #f0f1f6;
  border-radius: 8px;
  margin-bottom: 18px;
}
.pagination-area {
  display: flex;
  justify-content: center;
  margin-top: 24px;
}
@media (max-width: 900px) {
  .dashboard-container {
    max-width: 100vw;
    border-radius: 0;
  }
  .dashboard-main {
    padding: 16px 4px 0 4px;
  }
  .main-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .create-btn {
    margin-left: 0;
    width: 100%;
  }
}
</style>
